<template>
<div class="container">
  <div>
      <span class="xian">试题录入</span>
      <br>
        <el-divider></el-divider>
  </div>
  <!--
    el-form  :model="form"  form表示包含了所有表单子项的一个大的对象
             :rules="rules"  rules校验规则的对象
    el-form-item: prop="校验的字段名称"

    el-select 双向绑定的一般是string或者number
     el-option 遍历一个数组结构
     最终你选中的那个option的value值会自动绑定到select中
   -->
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
  <el-form-item label="学科" prop="subjectID">
    <el-select v-model="form.subjectID" placeholder="请选择" class="Swidth" @change="studyChange" clearable>
      <el-option
      :label="item.label"
      v-for="item in studyList"
      :key="item.value"
      :value="item.value"
       ></el-option>
    </el-select>
  </el-form-item>
  <!----------------------------------------------- 目录 -------------------------------------------->
  <el-form-item label="目录" prop="catalogID">
    <el-select v-model="form.catalogID" placeholder="请选择" class="Swidth" clearable>
      <el-option
      :label="item.directoryName"
      v-for="item in qdirectoryName"
      :key="item.id"
      :value="item.id"
      ></el-option>
    </el-select>
  </el-form-item>
  <!------------------------------------------------企业  ------------------------------------------->
  <el-form-item label="企业" prop="enterpriseID">
    <el-select v-model="form.enterpriseID" placeholder="请选择" class="Swidth" clearable>
      <el-option
      :label="item.company"
      v-for="item in companyList"
      :key="item.id"
      :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <!-----------------------------------------------城市  ------------------------------------------>
  <el-form-item label="城市" prop="province" style="position: relactive">
    <el-select v-model="form.province" placeholder="请选择" class="cheng" @change="selectCity" clearable>
      <el-option
      label=""
      v-for="(item,index) in provinceList"
      :key="index"
      :value="item"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="" prop="city" style="position: absolute;top:250px;left:255px">
    <el-select v-model="form.city" placeholder="请选择" class="cheng" clearable>
      <el-option
      label=""
      v-for="(item,index) in cityList"
      :key="index"
      :value="item"></el-option>
    </el-select>
  </el-form-item>
  <!---------------------------------------------方向  ----------------------------------------------->
  <el-form-item label="方向" prop="direction">
    <el-select v-model="form.direction" placeholder="请选择" class="Swidth" clearable>
      <el-option
      label=""
      :value="item"
      v-for="item in directionList"
      :key="item"
      ></el-option>
    </el-select>
  </el-form-item>
  <!---------------------------------------------  按钮部分  ----------------------------------------------->
  <el-form-item label="题型" prop="questionType">
    <el-radio-group v-model="form.questionType"  style="marginTop:-50px">
    <el-radio
    v-for="item in questionType"
    :key="item.value"
    :label="item.label"
    @change="checkedAlion"
    >{{item.label}}</el-radio>
  </el-radio-group>
  </el-form-item>
    <el-form-item label="难度" prop="difficulty">
    <el-radio-group v-model="form.difficulty"  style="marginTop:-50px"  >
    <el-radio
    v-for="item in difficulty"
    :key="item.value"
    :label="item.label">{{item.label}}</el-radio>
   </el-radio-group>
  </el-form-item>
  <!------------------------------------------ 引入富文本编辑器 -------------------------------------->
  <el-form-item label="题干" prop="question">
    <quill-editor :option1="option1" v-model="form.question"></quill-editor>
  </el-form-item>
  <!------------------------------------------- 选项部分 ----------------------------------------------->
    <el-form-item label="选项" class="xuanxiang" v-if="form.questionType!='简答'">
    <!-- 上传图片 -->
    <div class="uploadimage" v-for="item in arr" :key="item.code">
      <!-- 单选项 -->
    <el-radio-group v-model="radio1" v-if="form.questionType==='单选'">
    <el-radio
    :label="item.code"
    ></el-radio>
    </el-radio-group>
    <!-- 多选项 -->
    <el-checkbox-group v-model="checkList" v-if="form.questionType==='多选'">
    <el-checkbox
    :label="item.code"
    ></el-checkbox>
    </el-checkbox-group>
    <el-input v-model="item.title"  class="xuanxiangZ"  style="marginLeft:-15px"></el-input> <br>
    <!-------------------------------------- 上传图片组件 ------------------------------------------>
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false">
      <i slot="default" style="fontStyle:normal;fontSize:16px;position:absolute;top:-45px;left:18px">上传图片</i>
          <span class="el-icon-circle-close"></span>
      <div slot="file" slot-scope="{file}" class="Upload">
      <img
        class="el-upload-list__item-thumbnail"
        :src="item.img" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
       </span>
      </div>
    </el-upload>
    </div>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  <!-- 危险按钮 -->
 <el-row>
   <el-button class="btn1" type="danger" :disabled="form.questionType!='多选'" @click="addSelect" style="marginLeft:0px;marginTop:25px" >+增加选项与答案</el-button>
 </el-row>
  </el-form-item>
  <el-form-item label="解析视频">
    <el-input v-model="form.videoURL" class="jiexi"></el-input>
  </el-form-item>
    <el-form-item label="答案解析" prop="answer">
    <quill-editor :option="option" v-model="form.answer"></quill-editor>
  </el-form-item>
  <el-form-item label="题目备注">
    <el-input type="textarea" v-model="form.remarks" class="beizhu" :rows="3"></el-input>
  </el-form-item>
  <el-form-item label="试题标签" prop="tags">
  <el-select
    v-model="form.tags"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择试题标签">
    <el-option
      v-for="item in optionss"
      :key="item.value"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
  </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="addData(form)" class="btn" v-if="ccflag">确认提交</el-button>
    <el-button type="success" @click="addData(form)" class="btn" v-if="!ccflag">确认修改</el-button>
  </el-form-item>
</el-form>
</div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { simple } from '@/api/hmmm/subjects.js' // 学科简单列表
import { list as alist } from '@/api/hmmm/companys.js' // 企业列表,就这一个
import { provinces, citys } from '@/api/hmmm/citys.js' // 地址,没有接口,直接用
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js' // 方向,也没接口,直接用
import { list as blist } from '@/api/hmmm/directorys.js'
import { simple as mlsimple } from '@/api/hmmm/tags.js' // 目录简单列表
import { add, detail } from '@/api/hmmm/questions.js' // 学科简单列表,试题数据回填
export default {
  components: { quillEditor },
  name: 'addarticle',
  data () {
    return {
      form: { // -------------------------------------------数据和后端提交保持一致
        subjectID: null, // 学科名称
        catalogID: null, // 目录名称
        enterpriseID: null, // 企业名称
        province: null, // 省市名称
        city: null, // 城市名称
        direction: '', // 方向
        questionType: '单选', // 题型框
        difficulty: '简单', // 难度框
        options: [], // 选项框
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: [], // 试题标签
        question: '' // 题干
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        tags: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 5, max: 30000, message: '最少20个字', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 5, max: 30000, message: '最少20个字', trigger: 'blur' }
        ]
      },
      difficulty, // 难度
      questionType, // 题型
      studyList: [], // 学科列表
      qdirectoryName: [], // 目录列表
      companyList: {}, // 企业列表
      provinceList: [], // 省市列表
      cityList: [], // 城市列表
      directionList: [], // 方向列表
      option1: {},
      option: {},
      options: [], // 后端要求的选项字段,
      dialogVisible: false,
      dialogImageUrl: '',
      flag: true, // 控制选项是否隐藏
      disabled: true, // 控制button状态
      totalArr: ['A:', 'B:', 'C:', 'D:', 'E:', 'F:', 'G:'], // 可以添加的总个数
      ccflag: true,
      arr: [
        {
          code: 'A:',
          title: '',
          img: '',
          isRight: false
        },
        {
          code: 'B:',
          title: '',
          img: '',
          isRight: false
        },
        {
          code: 'C:',
          title: '',
          img: '',
          isRight: false
        },
        {
          code: 'D:',
          title: '',
          img: '',
          isRight: false
        }
      ],
      cflag: true,
      checkList: [],
      optionss: [], // 标签选择
      value: [],
      radio1: 1
    }
  },
  methods: {
    addData (ruleForm) {
      this.$refs.form.validate((valid) => {
        // valid布纹纸,都通过为true,有一个不行就false
        if (valid) {
          this.arr.forEach((item, index) => {
            this.checkList.forEach(checkItem => {
              if (item.code === checkItem) {
                item.isRight = true
              }
            })
          })
          this.form.options = this.arr
          // 调用接口-----------------------------------------------------最后的天花板
          this.form.tags = this.form.tags.join(',')
          const data = {
            ...this.form
          }
          add(data).then(res => {
            this.$message({
              type: 'success!',
              message: '提交成功'
            })
            // 清空输入框
            this.$refs.form.resetFields()
            this.form.answer = ''
            this.form.remarks = ''
          })
        } else {
          return false
        }
      })
    },
    // 选择学科后,调用目录接口
    studyChange () {
      // 请求下面另一个下拉框的数
      const data = {
        subjectID: this.form.subjectID
      }
      blist(data).then(res => {
        // console.log(res)
        this.qdirectoryName = res.data.items // 得到目录数组
      })
    },
    // 自动获取学科列表
    hGetStudyList () {
      simple().then(res => {
        // console.log(res)
        // 赋值给学科
        this.studyList = res.data
      })
    },
    // 自动获取企业列表
    hGetCompanyList () {
      const data = {
        enterpriseID: this.form.enterpriseID
      }
      alist(data).then(res => {
        // console.log(res)
        this.companyList = res.data.items // 用全称,接口不管
      })
    },
    // 自动获取省城列表,点击省城列表后获取城市列表
    hGetProvinces () {
      this.provinceList = provinces()
      // console.log(this.provinceList)
    },
    // 点击省城获取城市列表
    selectCity () {
      // console.log(citys(this.form.province))
      this.cityList = citys(this.form.province)
    },
    // 自动获取方向列表
    hdirection () {
      this.directionList = direction
      // console.log(this.directionList)
    },
    // 点击单选框禁用button,并隐藏多选框
    checkedAlion () {
      // 控制选项是否隐藏
      this.flag = true
      // 禁用button
      this.disabled = true
      // 控制单选框和多选框切换
      this.cflag = true
    },
    // 点击多选框启动按钮,隐藏单选框
    checkedLotsof () {
      // 控制选项是否隐藏
      this.flag = true
      // 启动button

      this.disabled = false
      // 切换到多选框
      this.cflag = false
    },
    // 点击简答,隐藏选项框
    checkO () {
      this.flag = false
    },
    addSelect () {
      if (this.arr.length > 6) {
        this.$message({
          type: 'warning',
          message: '选项太多了哦'
        })
        return false
      }
      const curIndex = this.arr.length
      this.arr.push({
        code: this.totalArr[curIndex],
        title: '',
        img: '',
        isRight: false
      })
    },
    // 自动获取标签目录
    hmlsimple () {
      mlsimple().then(res => {
        // console.log(res)
        this.optionss = res.data
        // 学科数据回填的标准操作,判断是否调用数据回填函数
        const data = {
          id: this.$route.query.id
        }
        // console.log(this.$route.query.id)
        if (data.id === undefined) { // ----------------不调用
          this.ccflag = true
        } else { // ------------------------------------调用
          this.ccflag = false
          detail(data).then(res => {
            // console.log(res.data)
            this.form = res.data
            this.studyChange()
            this.hGetCompanyList()
            // 判断题型
            if (res.data.questionType === '1') {
              this.form.questionType = '单选'
            } else if (res.data.questionType === '2') {
              this.form.questionType = '多选'
            } else if (res.data.questionType === '3') {
              this.form.questionType = '简答'
            }
            // 判断类别
            if (res.data.difficulty === '1') {
              this.form.difficulty = '简单'
            } else if (res.data.difficulty === '2') {
              this.form.difficulty = '一般'
            } else if (res.data.difficulty === '3') {
              this.form.difficulty = '困难'
            }
            this.form.tags = res.data.tags.split(',')
            // console.log(this.form.tags)
          })
        }
      })
    }
  },
  mounted () {
    this.hGetStudyList()
    this.hGetCompanyList()
    this.hGetProvinces()
    this.hdirection()
    this.hmlsimple()
  }

}
</script>

<style scoped lang='scss'>
.container{
  margin: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow:0px 0.5px 20px 2px grey;
  // 富文本编辑器格式
  // 需要样式穿透 scss不支持/deep/ 并且元素需要嵌套到唯一的根元素内才能生效
  ::v-deep.ql-editor{
    height:200px;
  }
  ::v-deep.ql-snow{
    width: 712px;
  }
  // 上传组件样式
  ::v-deep.el-upload{
    position: absolute;
    top: 28px;
    left: 300px;
    width: 100px;
    height: 60px;
  }
  ::v-deep.uploadimage{
    display:flex;
  }
  ::v-deep.el-checkbox{
    margin-right: 10px;
    margin-top:40px;
  }
  ::v-deep.el-radio{
    margin-top: 50px;
    margin-right: 10px;
  }
  ::v-deep.jiexi{
    margin-top: -20px;
  }
  span{
      position: absolute;
      top: -5px;
      left: 90px;
  }
}
.xian{
  display: block;
  height: 36px;
  line-height: 56px;
  padding-left:20px ;
}
.demo-ruleForm{
  padding-top: 8px;
  padding-left: 30px;
}
.Swidth{
  width: 400px;
  height: 36px;
}
.cheng{
  width: 195px;
  margin-right: 5px;
}
.xuanxiangZ{
  width: 240px;
  height: 36px;
  margin-top: 40px;
  margin-left:0 !important;
}
.xuanxiang4{
  margin-left: 28px;
}
.Xyou{
  position: absolute;
  top: 50px;
  left: 0;
}
.uploadimage{
  position: relative;
}
.Upload{
  width: 20px;
}
.btn1{
  width: 123px;
  height: 32px;
  font-size: 12px;
  margin-left: 98px ;
}
.btn{
  margin-bottom: 20px;
}
.jiexi{
  width: 400px;
  margin-top: 20px;
}
.beizhu{
  width: 400px;
}
</style>
